<template>
  <el-container>
    <el-header>
      <Header1></Header1>
    </el-header>
    <div
      style="height: 1px; background-color: grey; margin-top: 6px; opacity: 0.4"
    ></div>
    <div>
      <el-menu
        mode="horizontal"
        style="border: none; float: right; margin-right: 100px"
      >
        <el-menu-item
          index="1"
          style="
            border-left: 1px solid lightgrey;
            border-right: 1px solid lightgrey;
          "
          @click="$router.push('/myufun')"
          >我的优坊</el-menu-item
        >
        <el-menu-item
          index="1"
          style="border-right: 1px solid lightgrey"
          @click="$router.push('/myaddress')"
          >我的地址</el-menu-item
        >
        <el-menu-item
          index="2"
          style="border-right: 1px solid lightgrey"
          @click="$router.push('/myorder')"
          >我的订单</el-menu-item
        >
      </el-menu>
    </div>
    <div
      style="
        height: 1px;
        background-color: lightgrey;
        margin-top: 0px;
        opacity: 0.4;
      "
    ></div>
    <el-main>
      <div class="mytitle">
        <b>我的订单</b>
      </div>
      <div
        style="
          height: 1px;
          background-color: lightgrey;
          margin-top: 100px;
          opacity: 0.4;
        "
      ></div>
      <div class="order">
        <b>进行中的订单</b>
      </div>
      <br /><br />
      <div class="orderingmsg" style="margin-top: 10px">
        <el-table :data="orderlist" style="width: 80%; margin-left: 100px">
          <el-table-column type="expand" style="background-color: green">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="订单号">
                  <span>{{ props.row.orderId }}</span>
                </el-form-item>
                <el-form-item label="订单价格">
                  <span>{{ props.row.price }}</span>
                </el-form-item>
                <el-form-item label="购买商品">
                  <span
                    v-for="(orderGood, index) in props.row.orderGoods"
                    :key="index"
                  >
                    {{ orderGood.count}}
                  </span>
                </el-form-item>
                <el-form-item label="状态">
                  <span>{{ tranStatus(props.row.status) }}</span>
                </el-form-item>
                <el-form-item label="创建时间">
                  <span>{{ props.row.createDate }}</span>
                </el-form-item>
                <el-form-item label="支付时间">
                  <span>{{ props.row.payDate }}</span>
                </el-form-item>
                <el-form-item label="发货时间">
                  <span>{{ props.row.deliverDate }}</span>
                </el-form-item>
                <el-form-item label="成交时间">
                  <span>{{ props.row.dealDate }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="orderId" label="订单号" width="180">
          </el-table-column>
          <el-table-column label="订单价格" width="180">
            <template slot-scope="props">
              <span>￥{{ props.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="props">
              <span>{{ tranStatus(props.row.status) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createDate" label="创建时间" width="180">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >付款</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >取消</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="order">
        <b>我的历史订单</b>
      </div>
      <div class="orderingmsg">
        <span style="margin-left: 20px">无订单信息</span>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Header1 from "@/views/Header1.vue";
import { getItem } from "@/utils/localStorage.js";
import { getByUserId } from "@/api/order.js";
import { getById } from "@/api/goods.js";
export default {
  components: { Header1 },
  data() {
    return {
      orderlist: [],
      name: "",
      image: "",
    };
  },
  created() {
    this.getByUser();
    console.log(this.getGoodById("23"));
  },
  methods: {
    getByUser() {
      getByUserId(getItem("id")).then((res) => {
        if (res.data.code == "0000") {
          console.log("加载成功");
          this.orderlist = res.data.data;
          console.log(this.orderlist);
        } else {
          console.log("出错了");
        }
      });
    },
    getSubOrder(order) {
      var subList = [];
      subList.push(order);
      return subList;
    },
    tranStatus(status) {
      if (status == "0") {
        return "待支付";
      } else if (status == "1") {
        return "已支付";
      } else if (status == "2") {
        return "代发货";
      } else if (status == "3") {
        return "已发货";
      } else if (status == "4") {
        return "交易成功";
      }
    },
    getGoodById(id) {
      getById(id).then((res) => {
        if (res.data.code == "0000") {
            return res.data.data.name;
        } else {
          console.log("获取商品失败");
        }
      });
    },
  },
};
</script>

<style lang="scss" >
.el-header {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding-bottom: 20px;
}
.head {
  display: fixed;
  height: 60px;
  text-align: left;
}
.head > div {
  float: left;
}
.head img {
  float: left;
  padding: 0;
  margin: 0;
}
.el-main {
  background-color: whitesmoke;
  color: #333;
  text-align: center;
  line-height: 100%;
  height: 1000px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.leftgoods {
  border-right: 1px solid gainsboro;
}
.dleftgoods {
  float: left;
  flex: 1;
  border-right: 1px solid gainsboro;
}
.dmidgoods {
  float: left;
  flex: 1;
  border-right: 1px solid gainsboro;
}
.drightgoods {
  float: left;
  flex: 1;
}
.parent {
  display: flex;
  height: 300px;
  border-bottom: 1px solid lightgray;
}
.parent > div {
  background-color: white;
}
.rightgoods > div {
  height: 50%;
}
.mytitle {
  float: left;
  font-size: 25px;
  margin-left: 100px;
  margin-top: 50px;
}
.order {
  text-align: left;
  font-size: 20px;
  margin-left: 100px;
  margin-top: 50px;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-table_row {
  height: 60px;
}
tr {
  height: 80px;
}
</style>